<template>
  <div class="popDiv" v-transfer-dom>
    <popup v-model="show" position="bottom" @on-hide="handleHidePopup">
      <div style="height: 4.26rem">
        <ul class="choList">
          <li v-for="(item, index) of choLists" :key="index" @click="choItem(item)">{{ item }}</li>
        </ul>
        <div class="cancel" @click="handleCancel">取消</div>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
  },
  props: {
    popupShow: Boolean,
  },
  watch: {
    popupShow(boolean) {
      this.show = boolean;
    }
  },
  data() {
    return {
      choLists: ['全部', '已过期', '未过期'],
      chooseType: '',
      show: false,
    }
  },
  methods: {
    handleHidePopup() {
      this.$emit('handleHidePopup')
    },
    choItem(data) {
      this.$emit('hasChoType', data)
    },
    handleCancel() {
      this.$emit('handleHidePopup')
    }
  }
}
</script>

<style lang="less" scoped>
  .popDiv {
    .choList {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0.14rem;
      li {
        width: 100%;
        height: 1.04rem;
        line-height: 1.04rem;
        background: #fff;
        border-bottom: 1px solid #eee;
        text-align: center;
        color: #222;
        font-size: 0.3rem;
      }
    }
    .cancel {
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      background: #fff;
      text-align: center;
      color: #222;
      font-size: 0.3rem;
    }
  }
</style>

